<template>
  <div>
    <full-calendar  class="test-fc" :events="fcEvents"
    ref="msg" v-bind="{typesof:type}"
      first-day='1' locale="zh-cn"
      @changeMonth="changeMonth"
      @eventClick="eventClick"
      @dayClick="dayClick"
      @moreClick="moreClick">
        <template slot="fc-event-card" scope="p">
            <p class="" v-show="type==1||type==2">{{timestampToTime(p.event.start)}}</p>
            <p class="paragraph"> {{ p.event.title }}</p>
            <p v-show="type==2">{{p.event.data.name}}--{{p.event.data.age}}--{{p.event.data.sex}}</p>
        </template>
    </full-calendar>
  </div>
</template>
<script>
window.abc
let demoEvents = [
    {
      key:0,
      title    : '作用域插槽用来自定义渲染日期单元格，返回内容会被追加到单元格,',
      start    : 1567730198000,
      data     :{"name":"smith","age":30,"sex":"男"},
      //跟换颜色
      color : '#C7E6FD',
      // end      : '2019-09-3',
      // cssClass : 'family'
    },
    {
       key:1,
      title : 'Lunfel 726-727',
      start : 1567754465000,
      data     :{"name":"smith","age":30,"sex":"男"},
      color : '#C7E6FD',
      // end : '2019-09-26',
      // cssClass : ['home', 'work']
    },
    {
       key:7,
      title : 'Lunfel 726-727',
      start : 1567754465001,
      data     :{"name":"smith","age":30,"sex":"男"},
      color : '#C7E6FD',
      // end : '2019-09-26',
      // cssClass : ['home', 'work']
    },
    {
       key:8,
      title : 'Lunfel 726-727',
      start : 1567754465002,
      data     :{"name":"smith","age":30,"sex":"男"},
      color : '#C7E6FD',
      // end : '2019-09-26',
      // cssClass : ['home', 'work']
    },
    {
       key:2,
      title : 'Lunfel 2/27-2/28',
      start : 1567754504569,
      data     :{"name":"smith","age":30,"sex":"男"},
      color : '#C7E6FD',
      // end : '2019-09-27'
    },
    { 
         key:3,
        title : 'Lunfel 2/27-2/28',
        start : 1567816598000,
        // end : '2019-09-27'
        data     :{"name":"smith","age":30,"sex":"男"},
        color : '#C7E6FD',
    },
    {
         key:4,
        title : 'Lunfel 2/27-2/28',
        start : 1567823798000,
        // end : '2019-09-27'
        data     :{"name":"smith","age":30,"sex":"男"},
        color : '#C7E6FD',
    },
    {
         key:5,
        title : 'Lunfel 2/26-3/05',
        start : 1567902998000,
        // end : '2019-09-26'
        data     :{"name":"smith","age":30,"sex":"男"},
        color : '#C7E6FD',
    },
    { 
         key:6,
        title : '5555555',
        start : 1567910198000,
        // end : '2019-09-26'
        data     :{"name":"smith","age":30,"sex":"男"},
        color : '#C7E6FD',
    },
    // {
    //      key:7,
    //     title : 'Lunfel 1/27-1/28',
    //     start : '2019-09-27',
    //     // end : '2019-09-27'
    //     data     :{"name":"smith","age":30,"sex":"男"}
    // },
    // {
    //      key:8,
    //     title : 'Lunfel 1/27-2/2',
    //     start : '2019-09-27',
    //     // end : '2019-09-27'
    //     data     :{"name":"smith","age":30,"sex":"男"}
    // },
    // {
    //      key:9,
    //     title : 'Lunfel 3/27-3/28',
    //     start : '2019-09-27',
    //     // end : '2019-09-27'
    //     data     :{"name":"smith","age":30,"sex":"男"}
    // },
  ];

export default {
	data () {
		return {
            name:'Sunny!',
            fcEvents : demoEvents,
            accuratetime:Math.round(new Date()),
            type:0
        }
  },
  mounted(){
    window.abc=this
    this.$refs.msg.time(this.accuratetime)
  },
  methods : {
    timestampToTime (row) {
        var date = new Date(row) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = date.getMinutes() + ':'
        var s = date.getSeconds()
        return Y+M+D+h+m+s
    },
    //点击月份
    'changeMonth' (start, end, current) {
      console.log('changeMonth', start.format(), end.format(), current.format())
    },
    //活动事件点击
    'eventClick' (event, jsEvent, pos) {
       console.log(event.key)
    },
    //点击天
    'dayClick' (day, jsEvent) {
      console.log(jsEvent)
      console.log('dayClick', day, jsEvent)
    },
    //扩展点击
    'moreClick' (day, events, jsEvent) {
      console.log('moreCLick', day, events, jsEvent)
    }
  },
  components : {
    'full-calendar' : require('src/fullCalendar')
  }
}
</script>
<style lang='scss'>
  .app{
    color:green;
  }
  .paragraph{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: contents;
  }
</style>